<!DOCTYPE html>
<html>
  <head>
    <title>JavaScript &amp; jQuery - Chapter 11: Content Panels -  Tabs</title>
    <link rel="stylesheet" href="css/base.css" />
    <link rel="stylesheet" href="css/tabs.css" />
  </head>

  <body>

    <header><h1>Monsieur Pigeon</h1></header>

    <section class="page">

      <div class="tabs">

        <ul class="tab-list">
          <li class="active"><a class="tab-control" href="#tab-1"><h3>Description</h3></a></li>
          <li><a class="tab-control" href="#tab-2"><h3>Ingredients</h3></a></li>
          <li><a class="tab-control" href="#tab-3"><h3>Delivery</h3></a></li>
        </ul>

        <div class="tab-panel active" id="tab-1">
           <p>Take your tastebuds for a gentle stroll through an English garden filled with Monsieur Pigeon's beautifully fragrant Flower Series marshmallows. With three sweetly floral options: <strong>Elderberry</strong>, <strong>Rose Petal</strong>, and <strong>Chrysanthemum</strong> - all edible and all naturally flavored - they will have you dreaming of butterflies and birdsong in no time.</p>
        </div>

        <div class="tab-panel" id="tab-2">
            <p><strong>ELDERBERRY:</strong> sugar, glucose syrup, elderberry concentrate, gelatine, natural color, cornflour, confectioner's sugar <strong>ROSE PETAL:</strong> sugar, glucose syrup, rose water, gelatine, natural color, cornflour, sugared rose petals, confectioner's sugar <strong>CHRYSANTHEMUM:</strong> sugar, glucose syrup, natural chrysanthemum extract, gelatine, natural color, cornflour, confectioner's sugar</p>
        </div>

        <div class="tab-panel" id="tab-3">
            <p>Free postage and packaging on all orders! Due to the perishable nature of our product, we regret that we are unable to ship items internationally at this time. If you would like to find out when Monsieur Pigeon is coming to your country, please sign up for the mailing list.</p>
        </div>

      </div><!-- .tabs -->

    </section><!-- .page -->

    <script src="js/jquery-1.11.0.min.js"></script>
    <script src="js/tabs.js"></script>

  </body>
</html>